<template>
  <div class="home">
    <h1>欢迎使用拖拽布局系统</h1>
    <div class="left-panel">
      <DraggableModule
          v-for="(module, index) in draggableModules"
          :key="index"
          :moduleContent="module.content"
          :rows="module.rows"
          :cols="module.cols"
      />
    </div>
    <div class="right-panel">
      <MainLayout />
    </div>
  </div>
</template>

<script>
import DraggableModule from '../components/DraggableModule.vue'
import MainLayout from '../components/MainLayout.vue'

export default {
  components: {
    DraggableModule,
    MainLayout
  },
  data() {
    return {
      draggableModules: [
        {content: '1x1 模块', rows: 1, cols: 1},
        {content: '1x2 模块', rows: 1, cols: 2},
        {content: '2x1 模块', rows: 2, cols: 1},
        {content: '2x2 模块', rows: 2, cols: 2}
      ]
    }
  }
}
</script>

<style scoped>
.home {
  display: flex;
  justify-content: space-between;
}

.left-panel {
  width: 300px;
  padding: 10px;
  border-right: 2px solid #ccc;
}

.right-panel {
  flex-grow: 1;
  padding: 10px;
}
</style>
